import Markdown from 'markdown-to-jsx';
import Prism from 'prismjs';

import 'prismjs/themes/prism-okaidia.css';
import 'prismjs/components/prism-jsx';

const CodeBlock = ({ className, children, inline }) => {
  if (inline) {
    return <code className="px-1 py-0.5 bg-gray-200 rounded text-sm">{children}</code>;
  }

  const match = /language-(\w+)/.exec(className || '');
  const language = match ? match[1] : 'javascript';

  const highlightedCode = Prism.highlight(children, Prism.languages[language], language);

  return (
    <pre className="my-4 p-4 bg-gray-800 rounded text-white overflow-auto max-h-96">
      <code
        className={className}
        dangerouslySetInnerHTML={{ __html: highlightedCode }}
      />
    </pre>
  );
};

export default function MarkdownToJsx({content}) {
  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <Markdown
        options={{
          html: true,
          overrides: {
            h1: {
              component: 'h1',
              props: {
                className: 'text-3xl font-bold my-4'
              }
            },
            h2: {
              component: 'h2',
              props: {
                className: 'text-2xl font-semibold my-3'
              }
            },
            h3: {
              component: 'h3',
              props: {
                className: 'text-xl font-medium my-2'
              }
            },
            h4: {
              component: 'h4',
              props: {
                className: 'text-lg font-medium my-2'
              }
            },
            h5: {
              component: 'h5',
              props: {
                className: 'text-base font-medium my-2'
              }
            },
            h6: {
              component: 'h6',
              props: {
                className: 'text-sm font-medium my-2'
              }
            },
            code: CodeBlock
          }
        }}
      >
        {content}
      </Markdown>
    </div>
  );
}



